<template>
  <div class="app-container task-index">
    <el-card>
      <el-row :gutter="20" class="list">
        <el-col :span="8" class="item">
          <div class="box">
            <div class="img-box"><img src="../../../assets/images/icon-task-1.jpg" alt=""></div>
            <div class="text-box">
              <p>任务数量</p>
              <h2>{{allData.jobInfoCount?allData.jobInfoCount:0}}</h2>
              <div class="info">调度中心运行的任务数量</div>
            </div>
          </div>
        </el-col>
        <el-col :span="8" class="item">
          <div class="box">
            <div class="img-box"><img src="../../../assets/images/icon-task-2.jpg" alt=""></div>
            <div class="text-box">
              <p>调度次数</p>
              <h2>{{allData.jobLogCount?allData.jobLogCount:0}}</h2>
              <div class="info">调度中心触发的调度次数</div>
            </div>
          </div>
        </el-col>
        <el-col :span="8" class="item">
          <div class="box">
            <div class="img-box"><img src="../../../assets/images/icon-task-3.jpg" alt=""></div>
            <div class="text-box">
              <p>执行器数量</p>
              <h2>{{allData.executorCount?allData.executorCount:0}}</h2>
              <div class="info">调度中心在线的执行器机器数量</div>
            </div>
          </div>
        </el-col>
      </el-row>
      <div class="content-box">
        <div class="title">
          调度报表
          <div class="time-box">
            <i class="iconfont icon-rili-copy"></i>
            <el-date-picker v-model="timeArr" type="datetimerange" :picker-options="pickerOptions"
                            value-format="yyyy-MM-dd HH:mm:ss" range-separator="至" start-placeholder="开始日期"
                            end-placeholder="结束日期" align="right" @change="timeSelect">
            </el-date-picker>
          </div>
        </div>
        <div class="box">
          <el-row :gutter="20">
            <el-col :span="16">
              <div class="echart-box" id="left"></div>
            </el-col>
            <el-col :span="8">
              <div class="echart-box" id="right"></div>
            </el-col>
          </el-row>
        </div>
      </div>
    </el-card>
    <!-- 列表 end -->
  </div>
</template>

<script>
  import echarts from 'echarts';

  require('echarts/theme/macarons'); // echarts theme
  import {chartInfo} from '@/api/taskcenter/all';

  export default {
    components: {},
    props: {},
    data() {
      return {
        allData: {},
        chartLeft: null,
        chartRight: null,
        timeArr: [],
        pickerOptions: {
          shortcuts: [
            {
              text: '最近一周',
              onClick(picker) {
                const end = new Date();
                const start = new Date();
                start.setTime(
                  start.getTime() - 3600 * 1000 * 24 * 7
                );
                picker.$emit('pick', [start, end]);
              },
            },
          ],
        },
      };
    },
    watch: {},
    computed: {},
    methods: {
      initChart() {
        this.chartLeft = echarts.init(document.getElementById('left'));
        this.chartRight = echarts.init(document.getElementById('right'));
        let leftOption = {
          title: {
            text: '日期分布图',
          },
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'cross',
              label: {
                backgroundColor: '#6a7985',
              },
            },
          },
          legend: {
            data: ['成功', '失败', '进行中'],
          },
          color: ['#00a65a', '#c23632', '#f39c12'],
          grid: {
            left: '0',
            right: '8%',
            bottom: '0',
            containLabel: true,
          },
          xAxis: [
            {
              type: 'category',
              boundaryGap: false,
              data: this.allData.triggerDayList,
            },
          ],
          yAxis: [
            {
              type: 'value',
            },
          ],
          series: [
            {
              name: '成功',
              type: 'line',
              stack: '总量',
              areaStyle: {},
              emphasis: {
                focus: 'series',
              },
              data: this.allData.triggerDayCountSucList,
            },
            {
              name: '失败',
              type: 'line',
              stack: '总量',
              areaStyle: {},
              emphasis: {
                focus: 'series',
              },
              data: this.allData.triggerDayCountFailList,
            },
            {
              name: '进行中',
              type: 'line',
              stack: '总量',
              areaStyle: {},
              emphasis: {
                focus: 'series',
              },
              data: this.allData.triggerDayCountRunningList,
            },
          ],
        };
        let rightOption = {
          title: {
            text: '成功比例图',
            left: 'center',
          },
          tooltip: {
            trigger: 'item',
          },
          legend: {
            orient: 'vertical',
            left: 'left',
          },
          color: ['#00a65a', '#c23632', '#f39c12'],
          series: [
            {
              type: 'pie',
              radius: '50%',
              data: [
                {
                  value: this.allData.triggerCountSucTotal,
                  name: '成功',
                },
                {
                  value: this.allData.triggerCountFailTotal,
                  name: '失败',
                },
                {
                  value: this.allData.triggerCountRunningTotal,
                  name: '进行中',
                },
              ],
              emphasis: {
                itemStyle: {
                  shadowBlur: 10,
                  shadowOffsetX: 0,
                  shadowColor: 'rgba(0, 0, 0, 0.5)',
                },
              },
            },
          ],
        };
        this.chartLeft.setOption(leftOption);
        this.chartRight.setOption(rightOption);
      },
      /**
       * 日期选择
       */
      timeSelect(e) {
        console.log(e);
        this.inintFun(e[0], e[1]);
      },
      /**
       * 初始化
       */
      inintFun(beginTime, endTime) {
        let params = {};
        if (beginTime && endTime) {
          params = {startDate: beginTime, endDate: endTime};
        }
        chartInfo(params).then((res) => {
          this.allData = res.content;
          this.$nextTick(() => {
            this.initChart();
          });
        });
      },
    },
    created() {
      this.inintFun();
    },
    mounted() {
    },
  };
</script>
<style lang="scss" scoped>
  .task-index {
    .list {
      padding: 10px 0;

      .item {
        .box {
          display: flex;
          align-items: center;
        }

        &:nth-child(1) {
          .box {
            background: #00c0ef;
          }

          .img-box {
            background: #009abf;
          }
        }

        &:nth-child(2) {
          .box {
            background: #f39c12;
          }

          .img-box {
            background: #c27d0e;
          }
        }

        &:nth-child(3) {
          .box {
            background: #00a65a;
          }

          .img-box {
            background: #008548;
          }
        }

        .img-box {
          display: flex;
          width: 100px;
          height: 100px;
          align-items: center;
          justify-content: center;

          img {
            width: 72px;
            height: 72px;
          }
        }

        .text-box {
          font-size: 13px;
          color: #fff;
          flex: 1;

          p {
            margin: 0;
            padding: 0 15px;
          }

          h2 {
            margin: 0;
            padding: 5px 15px;
          }

          .info {
            padding: 10px 15px 0;
            border-top: 1px solid rgba(255, 255, 255, 0.7);
          }
        }
      }
    }

    .content-box {
      height: auto;
      overflow: hidden;
      margin-top: 30px;

      .title {
        display: flex;
        align-items: center;
        justify-content: space-between;
        font-size: 18px;
        border-bottom: 1px solid #f2f2f2;
        padding: 5px 0;

        .time-box {
          cursor: pointer;
          display: block;
          width: 40px;
          height: 40px;
          background: #3c8dbc;
          text-align: center;
          line-height: 40px;
          color: #fff;
          position: relative;

          .el-date-editor {
            opacity: 0;
            position: absolute;
            left: 0;
            top: 0;
            right: 0;
            bottom: 0;
          }
        }
      }

      .box {
        padding: 20px;

        #left {
          width: 100%;
          height: 400px;
        }

        #right {
          width: 100%;
          height: 500px;
        }
      }
    }
  }
</style>
